<template>
  <div class="match-info-left">
    <div class="match-info-left__head">
      <div class="time">
        <templaye v-if="match.live_time_str && match.live_time_str !== '' && match.live_time_str !== '0:0'">
          赛中：{{ match.live_time_str }}
        </templaye>
        <templaye v-else>开赛：{{ match.match_time }}</templaye>
      </div>
    </div>
    <div class="league">{{ match.league_name }}</div>
    <div class="home team">
      {{ match.home_name }}
    </div>
    <div class="away team">
      {{ match.away_name }}
    </div>
    <div class="bottom">
      <app-flex v-if="match.score" style="flex-wrap: wrap;">
        <div class="score">比分：{{ match.score }}</div>
        <div class="score" v-if="match.red_card">红牌：{{ match.red_card }}</div>
        <div class="score" v-if="match.yellow_card">黄牌：{{ match.yellow_card }}</div>
        <div class="score" v-if="match.corner">角球：{{ match.corner }} </div>
        <!-- <span>
          <span v-if="match.red_card"> 红牌：{{ match.red_card }} </span>
          <span v-if="match.yellow_card"> 黄牌：{{ match.yellow_card }} </span>
          <span v-if="match.corner"> 角球：{{ match.corner }} </span>
        </span> -->
      </app-flex>

      <!-- <div class="duration">
        {{ match.odds_data.length }}
        <img src="@/assets/board/out/right.png" />
      </div>
      <div class="ball-park">
        <img src="@/assets/board/out/ball-park.png" />
      </div>
      <img src="@/assets/board/out/money.png" /> -->
    </div>
  </div>
</template>
<script setup>
const prosp = defineProps({
  match: Object,
})
</script>
<style lang="scss" scoped>
.match-info-left {
  width: 204px;
  padding-right: 12px;
  padding-bottom: 12px;
  
}

.match-info-left__head {
  display: flex;
  align-items: center;
}

.time {
  color: #252a30;
}

.league {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #252a30;
}

.team {
  display: flex;
  align-items: center;
  margin-top: 6px;
  color: #252a30;
  .icon {
    margin: 0 4px;
  }
}

.bottom {
  margin-top: 12px;
}

.score{
margin-right: 30px;
margin-top: 8px;
}
</style>
